<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Autodcomplete 自动补全输入框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">Autodcomplete 组件提供输入建议。</p>
	<p class="desc">获取建议 属性是返回建议输入的方法。 在此示例中， querySearch(queryString, cb) 返回建议通过 cb(data) 自动完成建议。</p>
	<span>激活时列出建议： </span>
	<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="Please Input" @select="handleSelect"></el-autocomplete> &nbsp;&nbsp;&nbsp;&nbsp;
	<span>输入后列出建议： </span>
	<el-autocomplete v-model="state2" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable class="inline-input w-50" placeholder="Please Input" @select="handleSelect"></el-autocomplete>
	
	<el-divider content-position="left">自定义模板</el-divider><!-- =============================================================== -->
	<p class="desc">自定义如何显示输入建议。</p>
	<p class="desc">使用 scoped slot 自定义输入建议。 在这个范围中，你可以使用 item 键来访问当前输入建议对象。</p>
	<el-autocomplete v-model="state" :fetch-suggestions="querySearch" popper-class="my-autocomplete" placeholder="Please input" @select="handleSelect">
		<template #suffix>
			<el-icon class="el-input__icon" @click="handleIconClick"> <Edit /> </el-icon>
		</template>
		<template #default="{ item }">
			<div class="value">{{ item.value }}</div>
			<span class="link">{{ item.link }}</span>
		</template>
	</el-autocomplete>
	
	<el-divider content-position="left">远程搜索</el-divider><!-- =============================================================== -->
	<p class="desc">从服务端搜索数据。</p>
	<el-autocomplete v-model="state0" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect"></el-autocomplete>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			state1: '',
			state2: '',
			state: '',
			state0: '',
			items: [
				{id: 1, value: 'vue', link: 'https://github.com/vuejs/vue' },
				{id: 2, value: 'element', link: 'https://github.com/ElemeFE/element' },
				{id: 3, value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
				{id: 4, value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
				{id: 5, value: 'vuex', link: 'https://github.com/vuejs/vuex' },
				{id: 6, value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
				{id: 7, value: 'babel', link: 'https://github.com/babel/babel' },
				{id: 8, value: '中文汉字，百度', link: 'https://www.baidu.com' },
			],
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			// console.log(this.createFilter('at', 'aTuuu'));
			// console.log("中文JIAN件jian".toLowerCase());
		})
	},
	computed: {
		hasNode(){
			return function(node){
				return this.has_nodes.includes(node);
			}
		},
		createFilter(){
			return function(queryString, baseStr){
				return baseStr.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
			}
		},
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		},
		querySearch(str, cb){
			var results = [];
			if(str){
				results = this.items.filter(function(v,index){
					//自动补齐模式（必须输入前面的一部分）
					return v.value.toLowerCase().indexOf(str.toLowerCase()) === 0;
					//模糊匹配模式（可以是任意一部分子串）
					// return v.value.toLowerCase().includes(str.toLowerCase());
				})
			}else{
				results = this.items
			}
			cb(results);
		},
		querySearchAsync(str, cb){
			var results = [];
			setTimeout(()=>{
				//去服务端获取符合条件的数据
				results = this.items
				cb(results);
			}, 800);
		},
		handleSelect(item){
			console.log(item)
		},
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>